<script setup lang="ts">
import SysDialog from '@/components/SysDialog/index.vue';
import useBaseModel from '@/composables/system/menu/useBaseModel';
import useMenuAddAndEdit from '@/composables/system/menu/useMenuAddAndEdit';
import useSelectSvgIcon from '@/composables/system/svgicon/useSelectSvgIcon';
import useDialog from '@/hooks/useDialog';
import SelectSvgIcon from './SelectSvgIcon.vue';

// 基础数据
const { addModel, rules } = useBaseModel()

// 弹框
const { dialog, onShow, onClose } = useDialog()

// 注册事件
const emit = defineEmits(['save'])

const { onConfirm, show, sortHandleChange, typeHandleChange, addMenuForm, treeData, getMenuSort, select } = useMenuAddAndEdit(dialog, onShow, onClose, addModel, emit)

// 暴露方法给外部使用
defineExpose({
    show
})

// 选择图标
const { selectSvgIconRef, selectIcon } = useSelectSvgIcon()

</script>
<template>
    <SysDialog :title="dialog.title" :height="dialog.height" :visible="dialog.visible" @onClose="onClose"
        @onConfirm="onConfirm">
        <template v-slot:content>
            <el-form :model="addModel" ref="addMenuForm" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="24" :offset="0">
                        <el-form-item prop="parent_id" label="上级菜单">
                            <el-tree-select v-model="addModel.parent_id" node-key="id" :data="treeData.data"
                                check-strictly @change="getMenuSort(addModel.parent_id)" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" :offset="0">
                        <el-form-item prop="type" label="菜单类型">
                            <el-radio-group v-model="addModel.type" @change="typeHandleChange">
                                <el-radio label="0">目录</el-radio>
                                <el-radio label="1">菜单</el-radio>
                                <el-radio label="2">按钮</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="addModel.type == '0' || addModel.type == '1'">
                    <el-col :span="24" :offset="0">
                        <el-form-item prop="icon" label="菜单图标">
                            <el-input v-model="addModel.icon" @click="selectIcon(addModel.icon)"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="title" label="菜单名称">
                            <el-input v-model="addModel.title"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="sort" label="显示排序">
                            <el-input-number v-model="addModel.sort" class="mx-4" :min="0" controls-position="right"
                                @change="sortHandleChange" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="addModel.type == '0' || addModel.type == '1'">
                    <el-col :span="12" :offset="0">
                        <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
                            <el-form-item prop="is_link" label="是否外链">
                                <el-radio-group v-model="addModel.is_link">
                                    <el-radio label="0">否</el-radio>
                                    <el-radio label="1">是</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头">
                            <el-form-item prop="path" label="路由地址">
                                <el-input v-model="addModel.path"></el-input>
                            </el-form-item>
                        </el-tooltip>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col v-if="addModel.type == '0' || addModel.type == '1'" :span="12" :offset="0">
                        <el-form-item prop="component" label="组件路径">
                            <el-input v-model="addModel.component"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="code" label="权限字符">
                            <el-input v-model="addModel.code"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col v-if="addModel.type == '1'" :span="12" :offset="0">
                        <el-form-item prop="name" label="路由Name">
                            <el-input v-model="addModel.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="addModel.type == '1'" :span="12" :offset="0">
                        <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致">
                            <el-form-item prop="keep_alive" label="是否缓存">
                                <el-radio-group v-model="addModel.keep_alive">
                                    <el-radio label="0">否</el-radio>
                                    <el-radio label="1">是</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-tooltip>
                    </el-col>
                </el-row>
                <el-row v-if="addModel.type == '0' || addModel.type == '1'">
                    <el-col :span="12" :offset="0">
                        <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问">
                            <el-form-item prop="hidden" label="是否隐藏">
                                <el-radio-group v-model="addModel.hidden">
                                    <el-radio label="0">否</el-radio>
                                    <el-radio label="1">是</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问">
                            <el-form-item prop="status" label="菜单状态">
                                <el-radio-group v-model="addModel.status">
                                    <el-radio label="1">正常</el-radio>
                                    <el-radio label="2">停用</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-tooltip>
                    </el-col>
                </el-row>
            </el-form>
        </template>
    </SysDialog>
    <!-- 图标列表弹框 -->
    <SelectSvgIcon ref="selectSvgIconRef" @select="select"></SelectSvgIcon>
</template>
<style lang="scss" scoped>
</style>
